{extend name="main"}
{block name="style"}
<style>
    .text-center {
        text-align: center;
    }

    .text-center-font {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .group-member {
        min-width: 600px;
        max-width: 800px;
    }

    .flex>.item {
        max-width: 120px;
        height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .multi-ellipsis {
        box-sizing: border-box;
        display: block;
        display: -webkit-box;
        max-width: 666px;
        max-height: 240px;
        font-size: 14px;
        margin: 0 auto;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        letter-spacing: 1.6px;
        text-overflow: ellipsis;
        overflow-y: hidden;
    }
</style>
{/block}
{block name="body"}
<div class="flex" style="height: 260px">
    <div class="bg-white mb-3 " style="width:60%;">
        <el-container>
            <el-header class="pl-2" style="height: 120px">
                <div style="margin: 10px">
                    <h3 class="flex pt-2">{{chatData.name}}</h3>
                    <div class="flex mt-3">
                        <div class="mr-3">
                            <el-image src="/static/default1/bsadmin/workWechat/group_member.png" />
                        </div>
                        <div>
                            <div class="dark flex">
                                群主：<span>{{groupMaster}}</span>
                                <el-divider class="mt-1" direction="vertical"></el-divider>
                                共<span>{{tableData.length}}</span>位成员
                            </div>

                            <el-tooltip class="item" effect="dark"
                                :content="groupMember.slice(0,6).join('、') + (groupMember.length>7?'...':'')"
                                placement="bottom-start">
                                <div class="flex group-member flex-wrap">
                                    <div v-for="(item, index) in groupMember" v-if="index < 6">
                                        <div class="item dark overflow-x-auto">
                                            {{item}}<span v-if="index < 6 && index < groupMember.length">、</span>
                                        </div>
                                    </div><span>...</span>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-main
                style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background-color: #FFF;margin: 10px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div class="grid-content bg-purple text-center">
                                总人数
                            </div>
                            <div class="grid-content bg-purple text-center-font">
                                {{chatData.all_member}}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div class="grid-content bg-purple">
                                <div class="grid-content bg-purple text-center">
                                    注册用户数
                                </div>
                                <div class="grid-content bg-purple text-center-font">
                                    {{chatData.regNum}}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div class="grid-content bg-purple">
                                <div class="grid-content bg-purple text-center">
                                    今日新增人数
                                </div>
                                <div class="grid-content bg-purple text-center-font">
                                    {{chatData.today_join}}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div class="grid-content bg-purple text-center">
                                今日退群人数
                            </div>
                            <div class="grid-content bg-purple text-center-font">
                                {{chatData.today_quit}}
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <div class="bg-white mb-3 ml-3" style="width:40%;margin-left: 3px;">
        <div class="flex px-2 mb-0 m-2">
            <h3 class="flex-1 pt-2">群公告</h3>
            <!--            <span c style="float:right;margin-top: -30px">更新</span>-->
            <el-button type="text"><i class="el-icon-refresh">更新</i></el-button>
        </div>
        <div class="px-3">
            <!-- <el-divider></el-divider> -->
            <hr class="m-1" />
        </div>
        <!-- <p v-if="chatData.notice==''" style="margin-left: 20px;font-size:16px ">暂无公告</p> -->
        <!-- <p v-else style="margin-left:20px;font-size:16px">{{chatData.notice}}</p> -->
        <div class="m-2 multi-ellipsis" style="color: #808080;">{{getNotice}}</div>
    </div>
</div>
<div class="bg-white p-3">
    <div class="table-responsive">
        <el-table ref="tableList" :data="tableData" v-loading="search.ajax" style="width: 100%;"
            header-cell-class-name="table-header-DDE6FB">
            <el-table-column label="成员信息">
                <template slot-scope="scope">
                    <div>{{ scope.row.name }} <el-tag color="#ffb700" style="color: #ffffff" size="mini"
                            v-if="scope.row.userid==chatData.owner">群主</el-tag>
                        <span v-if="scope.row.type==2" style="color: #00Bc4a">@微信</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="是否注册" width="200">
                <template slot-scope="scope">
                    <!-- <div v-if="scope.row.uid==null || scope.row.uid==''">否</div>
                    <div v-else>是</div> -->
                    <el-tag effect="dark" size="mini"  v-if="scope.row.uid==null || scope.row.uid==''">未注册
                    </el-tag>
                    <el-tag effect="dark" size="mini" type="success" v-else>已注册</el-tag>
                    <el-tag v-if="false" effect="dark" size="mini" color="#ff976a" style="border: #ff976a 1px solid;">
                        企业用户</el-tag>
                </template>
            </el-table-column>
            <el-table-column  label="简历完善度" width="150">
                <template slot-scope="scope">
                    <span style="text-align: center" v-if="scope.row.progress=='' || scope.row.progress==null ">--</span>
                    <span v-else>{{scope.row.progress}}</span>
                </template>
            </el-table-column>
            <el-table-column  label="投递次数" width="150">
                <template slot-scope="scope">
                    <span style="text-align: center" v-if="scope.row.jobsDeliveryResume=='' || scope.row.jobsDeliveryResume==null ">--</span>
                    <span v-else>{{scope.row.jobsDeliveryResume}}</span>
                </template>
            </el-table-column>
            <el-table-column label="入群时间" width="150">
                <template slot-scope="scope">
                    <div class="small">
                        <div>{{ scope.row.join_time }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="入群方式">
                <template slot-scope="scope">
                    <div v-if="scope.row.join_scene==1">由群成员邀请入群（直接邀请入群）</div>
                    <div v-else-if="scope.row.join_scene==2">由群成员邀请入群（通过邀请链接入群）</div>
                    <div v-else="scope.row.join_scene==3">通过扫描群二维码入群</div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-responsive py-3 text-center">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="search.page" :page-sizes="[10,50,100,200]" :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="search.total">
        </el-pagination>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var chatData = JSON.parse('{:json_encode($chatData)}'.replace(/[\r\n\s+]/g, '\\n'));
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            tableData: [],
            chatData: chatData,
            search: {
                title: '',
                status: 'all',
                ajax: false,
                page: 1,
                total: 0,
                pageSize: 10
            },
        },
        watch: {
            view: XYBase.viewWatch,
        },
        created() {
            XYBase.created(this);
        },
        computed: {
            getNotice() {
                if (this.chatData.notice) {
                    return this.chatData.notice
                }
                return '此群暂无群公告，请在企微设置之后点击上方更新按钮~'
            },
            groupMaster() {
                let masterEmployeeId = this.chatData.owner
                let masterName = ''
                this.tableData.map(item => {
                    if (item.userid == masterEmployeeId) {
                        masterName = item.name
                    }
                })
                return masterName
            },
            groupMember() {
                return this.tableData.map(item => item.name)
            }
        },
        methods: {
            handleSizeChange(val) {
                this.search.page = 1;
                this.search.pageSize = val;
                this.initHtml();
            },
            handleCurrentChange(val) {
                this.search.page = val;
                this.initHtml();
            },
            initHtml() {
                var _this = this;
                _this.search.ajax = true;
                $.ajax({
                    url: '',
                    type: 'get',
                    data: _this.search,
                    dataType: 'json',
                    error: function (err) {
                        _this.search.ajax = false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success: function (ret) {
                        _this.search.ajax = false;
                        if (ret) {
                            if (ret.code === 0) {
                                _this.search.total = ret.data.total;
                                _this.tableData = ret.data.data;
                            } else {
                                XYBase.msg(ret.msg);
                            }
                        } else {
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            }
        }
    });
    $(function () {
        vm.initHtml();
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
</script>
{/block}